<script type="text/javascript">
//<![CDATA[

$(function(){
	$('#swfupload-control').swfupload({
		upload_url: "/album/index/upload-images",
		file_post_name: 'vfile',
		file_size_limit : "50 MB",
		file_types : "*.jpeg;*.jpg;*.gif;*.doc;*.xls;*.ppt;*.png;",
		file_types_description : "Files",
		flash_url : "/scripts/swfupload/swfupload.swf",
		button_image_url : "http://www.swfupload.org/button_sprite.png", 
		button_width : 61, button_height : 22, 
		button_text : "<span class='redText'>Upload Photo(s)</span>",
		button_text_style : ".redText { color:#53b3e6; font:normal 12px arial;}", 
		button_cursor : SWFUpload.CURSOR.HAND,
		button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
		button_text_left_padding : 3, 
		button_text_top_padding : 2,		
		button_width : 114,
		button_height : 29,
		button_placeholder : $('#button')[0],
		debug: false
		//alert(upload_url);exit; 
	})
			.bind('fileQueued', function(event, file){
          	var imgfile = file.name;
			var listitem='<li id="'+file.id+'">';
				if(imgfile.length > 40)
			 {
				listitem+='File: <em>'+(imgfile.slice(0, 20))+'...'+imgfile.slice(-10)+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>';
				}else{
				listitem+='File: <em>'+imgfile+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>';
				}
				listitem+='<div class="progressbar" ><div class="progress" ></div></div>'+
				'<p class="status" >Pending</p>'+
				'<span class="addarticle" ></span>&nbsp;&nbsp;'+
				'<span class="cancel" >&nbsp;</span>'+
				'</li>';
			$('#log11').append(listitem);
			$('li#'+file.id+' .cancel').bind('click', function(){
				var swfu = $.swfupload.getInstance('#swfupload-control');
				swfu.cancelUpload(file.id);
				$('li#'+file.id).slideUp('fast');
			});
			// start the upload since it's queued
			$(this).swfupload('startUpload');
			
		})
		.bind('fileQueueError', function(event, file, errorCode, message){
			
			try {
					if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
							alert("" + (message === 0 ? "You have reached the upload limit." : "You can upload " + (message > 1 ? "up to " + message + " files." : "one file only.")));
							return;
					}

					switch (errorCode) {
					case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
							alert('Size of the file '+file.name+' is greater than limit');
							break;
					case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
							alert('Size of the file '+file.name+' is too low');
							break;
					case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
							alert("Invalid file type selected. ");
							break;
					default:
							if (file !== null) {
												}
							alert("Invalid file selected. ");
							break;
					}
				} catch (ex) {
					alert(ex);
				}

		})	
		.bind('uploadStart', function(event, file){
			$('#log11 li#'+file.id).find('p.status').text('Uploading...');
			$('#log11 li#'+file.id).find('span.progressvalue').text('0%');
			$('#log11 li#'+file.id).find('span.cancel').hide();
		})
		.bind('uploadProgress', function(event, file, bytesLoaded){		
			var percentage=Math.round((bytesLoaded/file.size)*100);
			$('#log11 li#'+file.id).find('div.progress').css('width', percentage+'%');
			$('#log11 li#'+file.id).find('span.progressvalue').text(percentage+'%');
		})
		.bind('uploadSuccess', function(event, file, serverData){
		//alert(serverData);
			var divId = parseInt(document.getElementById('hidCount1').value);
			addFile(serverData,'1',file.id);
			document.getElementById('filenm').value = serverData;
			var item=$('#log11 li#'+file.id);
			item.find('div.progress').css('width', '100%');
			item.find('span.progressvalue').text('100%');
			item.addClass('success').find('p.status').html('Completed!!! ');
			var name = serverData.split(".",2);
			var actimgName = serverData.split("_-_",2);
			var cleanimgactName = (actimgName[1].replace(/_/g," "));
			item.addClass('success').find('p.status').append(cleanimgactName+'<a class="wht_bt"  href="javascript:void(0)"  onclick="deleteBlock(\''+divId+'\',\''+trim(serverData)+'\',\'1\');" ><span><img src="/images/CloseIcon.png" alt="cross" id="close_1" class="align_X img_pointer"/></span></a>');;
			//item.addClass('success').find('span.addarticle').html('<a href="javascript:addToArticle(\''+serverData+'\');">Insert into article</a>');
		})
		.bind('uploadComplete', function(event, file){
			$(this).swfupload('startUpload');
		})
		
	
});	
  
function addFile(fileName,i,swfid)
{
	var divId = parseInt(document.getElementById('hidCount'+i).value);
	document.getElementById('hidCount'+i).value = parseInt(document.getElementById('hidCount'+i).value) + 1;
	oItemThumbDiv = document.createElement('div');
	oItemThumbDiv.style.width = "200px";
	oItemThumbDiv.style.paddingLeft = "120px";
	oItemThumbDiv.setAttribute('name','content_'+i+'_'+divId);
	oItemThumbDiv.setAttribute('id','content_'+i+'_'+divId);
	oItemThumbDiv.setAttribute('bgcolor',"#ccf9b9");
	var name = fileName.split(".",2);
	var actimgName = fileName.split("_-_",2);
	var cleanimgactName = (actimgName[1].replace(/_/g," "));
	//alert(fileName);
	//alert(actimgName);
	//oItemThumbDiv.innerHTML = '<div style="width:466px; height:auto; float:left;"><input type="hidden" name="fileNames'+'[]" value="'+fileName+'"/><input type="hidden" name="featured_values'+'[]" id="hid_'+swfid+'" value="0" /><div class="bor_bot_1 pad_tb_10"><div class="float_l width_9 pad_t_40"><img src="/images/delet_ad_icon.png" onclick="deleteBlock(\''+divId+'\',\''+fileName+'\',\''+i+'\');"/></div><div class="float_l width_5 pad_t_40">';
	if(cleanimgactName.length > 40) {
	cleanimgactName=(cleanimgactName.slice(0, 20))+'...'+cleanimgactName.slice(-10);
	} else{
	cleanimgactName= cleanimgactName;
	}
	//oItemThumbDiv.innerHTML = '<div style="width:545px; height:auto; float:left; border:0px solid #f00;"><input type="hidden" name="fileNames'+'[]" value="'+fileName+'"/><div class="bor_bot_1 pad_tb_10"><div class="float_l width_5 pad_t_40">'+cleanimgactName[1].replace(/_/g," ")+'</div></br><div class="clear"></div><div class="float_l width_7" id="'+name[0]+'"><img src="/Uploads/exercise/images/'+fileName+'" onclick="javascript:void(0);return false;" height="90" width="90" /></div><div class="float_l width_9 pad_t_40"><a class="wht_bt"  href="javascript:void(0)"  onclick="deleteBlock(\''+divId+'\',\''+fileName+'\',\''+i+'\');" ><span>Remove</span></a></div><div class="clear"></div></div></div>';
	oItemThumbDiv.innerHTML+='</div><input type="hidden" name="fileNames'+'[]" value="'+fileName+'"/><div id="'+name[0]+'"></div><div class="clear"></div></div></div>';
	document.getElementById('content_upload'+i).appendChild(oItemThumbDiv);
}
function addToArticle(id)
{
	var divId = id.split('.');
    var image_div = $('#'+divId[0]).html();
	//FCKeditorAPI.GetInstance('description').InsertHtml(image_div);   
}
//Function for deleting the image block
function deleteBlock(divid,filename,i)
{ 
	if(confirm('Do you really want to delete ?')) {
		$.ajax({
		type: "POST",
		dataType: "json",
		url: "/album/index/remove?filename="+filename,
		success: function(data){
			reletedDetails = data;
			$('#hidCount1').val($('#hidCount1').val() - 1); 
		}
		});
	document.getElementById('content_upload'+i).removeChild(document.getElementById('content_'+i+'_'+divid));
	var m=parseInt(i)-1;
	document.getElementById('SWFUpload_'+m+'_'+divid).style.display = 'none';
	} else {
		return false;
	}


}

//]]>
</script>
<div class="PopUp">
<form enctype="multipart/form-data" id="messageform" name="messageform" method="POST" action="/album/index/upload-photos/<?php echo base64_encode($ctx->album_id).'/'.base64_encode($ctx->type);?>" >
	<div class="PhoVidCrtForm">
		<div class="pad_t8">
		<label>Attachment</label>
		<div class="float_l pad_l_10" id="swfupload-control" style="float:right:10px">
				<input type="button" id="button"/>
				</div>
				
		</div>

				<div class="pad_t8">
		<label>&nbsp;</label>

				<input type="hidden" name="hidCount1" id="hidCount1" value="0" />
				<input type="hidden" name="filenm" id="filenm" value="" />
			<div class="float_l pad_l_10">
				<p id="queuestatus"></p>
				<ol id="log11"></ol>
				<div id="content_upload1"></div>
		<div class="clear"></div>
		</div>
		</div>
		<div class="pad_t8 pad_1108">
		<a class="Button" href="javascript:void(0);" onclick="uploadPhotos(document.messageform);"><span>Upload</span></a></div>
	</div>
	</form>
	
</div>
<script type="text/javascript">
	//<![CDATA[
function uploadPhotos(frm)
{
$('#messageform').submit();
}
//]]>
	</script>